import './app.scss';
import {AppHome} from "./home/AppHome";
import {DemoRowController} from "./Demo/DemoRowController";
import {theme} from "antd";
import {useMemo} from "react";
import {getComponentCls} from "../../packages/utils/getComponentCls";

export const App = () => {

  const { token } = theme.useToken();

  const variables = useMemo(() => {
    return Object.entries(token).reduce((prev, [key, val]) => {
      if (key.charAt(0) === '_') {
        return prev;
      }
      prev[key] = typeof val === "string" ? val.trim() : val;
      return prev;
    }, {} as Record<string, string>);
  }, [token]);

  const styles = useMemo(() => {
    return ':root{' + Object.entries(variables).map(([key, val]) => {
      return `--${getComponentCls(key)}:${key.indexOf('lineHeight') === -1 && typeof val === "number" && val > 1 ? `${val}px` : val}`;
    }).join(';') + '}';
  }, [variables]);

  return (
    <DemoRowController>
      <style>{styles}</style>
      <AppHome/>
    </DemoRowController>
  );
};
